<template>
  <w-view :commands="commands">

    <w-buttonbar gap="10" height="40" align="right" :scroll-y="true">
      <w-button @click="addTab" text="addTab" />
      <w-button @click="removeTab" text="removeTab" />
      <w-button text="新建">
        <w-button text="新建子任务"></w-button>
        <w-button text="新建反馈"></w-button>
      </w-button>
    </w-buttonbar>

    <w-vertical :scroll-y="true" height="120" style="padding:10px">
      <w-html class="item item-1" v-html="html"></w-html>
      <w-split expanded-icon=".f-i .f-i-qq" collapsed-icon=".f-i .f-i-git" :movable="true"></w-split>
      <w-horizontal height="200">
        <w-html class="item item-2" width="200">1</w-html>
        <w-split expanded-icon=".f-i .f-i-qq" collapsed-icon=".f-i .f-i-git" :movable="true" :expanded="!false" />
        <w-html class="item item-3" width="*">2</w-html>
      </w-horizontal>
    </w-vertical>

    <w-grid gap="0" face="cell" columns="200px auto" :default-colspan="1" style="margin: 10px" :scroll-y="true">
      <w-form rowspan="2" gap="5" :vertical="true" align="center">
        <div>09:00 ~ 18:00</div>
        <div>12:00 ~ 13:00</div>
      </w-form>
      <w-form>签到</w-form>
      <w-form>
        <w-datepicker width="*" input-width="*"></w-datepicker>
      </w-form>
    </w-grid>

    <w-vertical height="340" style="margin: 10px">
      <w-table height="*" ref="table" face="cell" :scroll-x="true" :scroll-y="true">
        <w-columns>
          <w-column width="60" align="center" fixed="left" />
          <w-column width="80" align="center" style="color:red" />
          <w-column width="*" min-width="650" />
          <w-column width="650" />
          <w-column width="100" align="center" fixed="right" />
        </w-columns>
        <w-thead :sort="sort">
          <w-tr>
            <w-td>
              <w-triplebox name="selectItem" :all="true" />
            </w-td>
            <w-th key="id" :sortable="true" @click:sort="clickSort">ID</w-th>
            <w-th key="name" :sortable="true" @click:sort="clickSort">姓名</w-th>
            <w-th>地址</w-th>
            <w-th>操作</w-th>
          </w-tr>
        </w-thead>
        <w-tbody :current="focusTR" :br="true">
          <w-tr v-for="item in rowList" :key="item.id" @click="clickRow($event, item)">
            <w-td>
              <w-triplebox name="selectItem" :value="item.id" />
            </w-td>
            <w-td>{{test(item.id)}}</w-td>
            <w-td :title="item.name">{{item.name}}</w-td>
            <w-td v-html="item.address"></w-td>
            <w-td>
              <span>编辑</span>&nbsp;
              <span @click.stop="removeRowList(item)">删除</span>
            </w-td>
          </w-tr>
        </w-tbody>
      </w-table>
    </w-vertical>

    <w-table face="cell" style="margin: 10px;">
      <w-columns>
        <w-column field="id" width="80" align="center" style="color:red" />
        <w-column field="name" width="220" />
        <w-column field="address" width="*" min-width="500" />
      </w-columns>
      <w-thead>
        <w-tr>
          <w-td>ID</w-td>
          <w-td>姓名</w-td>
          <w-td>地址</w-td>
        </w-tr>
      </w-thead>
      <w-tbody :pub="tableTreePub" :br="true" :escape="false">
        <w-tr template="task/TaskTR" :data="tableTreeList" :expanded="!true"></w-tr>
      </w-tbody>
    </w-table>

    <w-tabs :current="tabCurrent">
      <w-tab v-for="item in tabList" :key="item.id" :text="item.text" :closable="true" @click:close="closeTab(item)"
        @click="clickTab(item)">
        <w-view :template="item.tmpl"></w-view>
      </w-tab>
    </w-tabs>

    <!--    <w-buttonbar height="40" class="index-tabs" :current="tabCurrent" :scroll="true">
      <w-button v-for="item in tabList" :key="item.id" :text="item.text" class="x-btn"
        :closable="!item.fixed" :data="{id:item.id}" @click="tabCurrent = item.id" @click:close="closeTab(item)">
      </w-button>
    </w-buttonbar>
    <w-swiper height="*" class="index-swiper" :current="tabCurrent">
    <w-swiper-item v-for="item in tabList" :key="item.id">
      <w-view :template="item.tmpl"></w-view>
    </w-swiper-item>
    </w-swiper> -->

  </w-view>
</template>

<script>
  import $ from '../dfish.js'

  export default {
    data() {
      return {
        value: ['a', 'b'],
        swiperKey: '123',
        html: '<span>hello</span>',
        focusTR: '',
        rowList: [],
        tableTreePub: {
          src: 'widget.php?act=task-view&test=1&id=$id',
          on: {
            click: e => $.alert($(e).data.id)
          }
        },
        tableTreeList: {
          id: 'L001',
          name: 'Leaf001',
          address: 'LT',
          children: [{
              id: 'L011',
              name: 'Leaf011',
              address: 'Luv',
              'folder': false
            },
            {
              id: 'L012',
              name: 'Leaf012',
              address: 'love'
            },
          ]
        },
        tabCurrent: '003',
        tabList: [{
            id: '001',
            text: 'Hello1',
            tmpl: 'task/HelloView'
          },
          {
            id: '002',
            text: 'world',
            tmpl: 'task/WorldView'
          },
          {
            id: '003',
            text: 'Gold',
            tmpl: 'task/GoldView'
          },
        ],
        commands: {
          'edit': {
            type: 'Dialog',
            template: 'task/TaskForm',
            //preload: 'DialogStd',
            class1: 'large',
            cover: true,
          },
        },
        sort: {
          key: 'id',
          order: 'asc'
        },
      }
    },
    methods: {
      clickSort(e, sort) {
        this.sort = sort
        console.log(sort)
      },
      edit(item) {

      },
      addTab() {
        this.tabList.push({
          id: '004',
          text: 'Lion',
          tmpl: 'task/LionView'
        })
      },
      removeTab() {
        this.$refs.table.cmd({
          type: 'Loading',
          cover: true,
          hide: true
        })
      },
      allClick(e) {
        console.log($(e).isChecked)
      },
      clickRow(e, data) {
        this.focusTR = data.id
        $(e).cmd('edit', data.id)
      },
      clickTab(item) {
        this.tabCurrent = item.id
      },
      closeTab(item) {
        let i = this.tabList.findIndex(v => v.id == item.id)
        this.tabList.splice(i, 1)
        console.log(item)
        if (item.id == this.tabCurrent) {
          let f = this.tabList[i] || this.tabList[i - 1]
          if (f) {
            this.tabCurrent = f.id
          }
        }
      },
      test(i) {
        return i + 'd'
      },
      removeRowList(item) {
        let i = this.rowList.findIndex(v => v.id == item.id)
        this.rowList.splice(i, 1)
      }
    },
    mounted() {
      // this.rowList = [{
      //     id: '001',
      //     name1: '擎天柱',
      //     name: {
      //       rowspan: 2,
      //       text: '<b>擎天柱</b>'
      //     },
      //     address: '<b>史前地球</b>1111111111111111111111111111111111111111111111111111111111111111111111',
      //     status: 1,
      //   },
      //   {
      //     id: '002',
      //     name: '威震天',
      //     address: '塞伯坦星',
      //   },
      //   {
      //     id: '003',
      //     name1: '大黄蜂',
      //     name: {
      //       colspan: 2,
      //       text: '大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂大黄蜂'
      //     },
      //     address: '塞伯坦星'
      //   },
      //   {
      //     id: '004',
      //     name: '004',
      //     address: '004',
      //   },
      //   {
      //     id: '005',
      //     name: '005',
      //     address: '005',
      //   },
      //   {
      //     id: '006',
      //     name: '006',
      //     address: '006',
      //   },
      // ]
      let rowList = []
      for (let i = 0; i < 10; i++) {
        rowList.push({
          id: i,
          name: i,
          address: i
        })
      }
      this.rowList = rowList
    }
  }
</script>

<style>
  .table-box {
    margin: 20px;
  }

  .table-box .w-td {
    border: 1px solid #ddd;
  }

  .table-box thead td {
    border-top: 0;
    border-bottom: 0;
    padding: 0;
  }

  .right {
    height: 300px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
  }

  .right>* {
    background-color: #B82323;
  }

  .right>*:nth-child(-n+2) {
    grid-column: 1 / -1;
    background-color: #ddd;
  }
</style>
